import { useState } from 'react';
import { Box, Typography, FormControl, InputLabel, Select, MenuItem, FormHelperText, Button, Alert } from '@mui/material';

function SettingsPage({ onThemeChange, currentTheme }) {
  const [theme, setTheme] = useState(currentTheme || 'light');
  const [success, setSuccess] = useState('');

  const handleThemeChange = (event) => {
    try {
      const newTheme = event.target.value;
      setTheme(newTheme);
      setSuccess('');
      
      console.log('正在设置主题为:', newTheme);
      
      // 使用父组件提供的主题切换函数
      if (onThemeChange) {
        onThemeChange(newTheme);
        setSuccess(`主题已设置为 ${newTheme}`);
      }
    } catch (err) {
      console.error('设置主题失败:', err);
    }
  };

  return (
    <Box sx={{ p: 3 }}>
      <Typography variant="h4" gutterBottom>
        设置
      </Typography>
      
      {success && (
        <Alert severity="success" sx={{ mb: 2 }}>
          {success}
        </Alert>
      )}
      
      <FormControl fullWidth sx={{ mt: 2 }}>
        <InputLabel>主题</InputLabel>
        <Select
          value={theme}
          label="主题"
          onChange={handleThemeChange}
        >
          <MenuItem value="auto">跟随系统</MenuItem>
          <MenuItem value="light">浅色</MenuItem>
          <MenuItem value="dark">深色</MenuItem>
        </Select>
        <FormHelperText>选择应用的主题模式</FormHelperText>
      </FormControl>
      
      <Box sx={{ mt: 3 }}>
        <Typography variant="body1" gutterBottom>
          当前显示的主题: {currentTheme || '未知'}
        </Typography>
        
        <Button 
          variant="outlined"
          color="secondary"
          onClick={() => {
            if (onThemeChange) {
              const newTheme = theme === 'light' ? 'dark' : 'light';
              onThemeChange(newTheme);
              setTheme(newTheme);
              setSuccess(`已手动切换到${newTheme === 'light' ? '浅色' : '深色'}主题`);
            }
          }}
        >
          快速切换主题
        </Button>
      </Box>
    </Box>
  );
}

export default SettingsPage; 